Rename component

packages/components/psammead-script-link/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Script Switch Changelog
+
+<!-- prettier-ignore -->
+| Version | Description |
+|---------|-------------|
+| 1.0.0-alpha.1 | [PR#2294](https://github.com/bbc/psammead/pull/2294) Initial creation of package. |

packages/components/psammead-script-link/README.md

@@ -0,0 +1,66 @@
+# ⛔️ This is an alpha component ⛔️
+
+This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed.
+
+# psammead-script-link - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-script-link%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-script-link%2Fpackage.json) [![Dependency Status](https://david-dm.org/bbc/psammead.svg?path=packages/components/psammead-script-link)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-script-link) [![peerDependencies Status](https://david-dm.org/bbc/psammead/peer-status.svg?path=packages/components/psammead-script-link)](https://david-dm.org/bbc/psammead?path=packages/components/psammead-script-link&type=peer) [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/script-link--containing-image) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-script-link.svg)](https://www.npmjs.com/package/@bbc/psammead-script-link) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md)
+
+## Description
+
+The `SwitchScript` component is designed to be used where a service has multiple variants and there is a need to switch between them.
+
+## Installation
+
+```jsx
+npm install @bbc/psammead-script-link --save
+```
+
+## Props
+
+<!-- prettier-ignore -->
+| Argument  | Type | Required | Default | Example |
+| --------- | ---- | -------- | ------- | ------- |
+| service | string | yes | N/A | `'serbian'` |
+| variant | string | no | `null` | `'lat'` |
+| href | string | yes | N/A | `'https://www.bbc.com/serbian/lat'` |
+| children | node | yes | N/A | `'Lat'` |
+| script | object | yes | N/A | { canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, } |
+
+## Usage
+
+```jsx
+import ScriptLink from '@bbc/psammead-script-link';
+import { latin } from '@bbc/gel-foundations/scripts';
+
+const WrappingComponent = () => (
+  <div>
+    <ScriptLink
+      script={latin}
+      service="serbian"
+      href="https://www.bbc.com/serbian/lat"
+      variant="lat"
+    >
+      Lat
+    </ScriptLink>
+  </div>
+);
+```
+
+### When to use this component
+
+The `ScriptLink` component is to be used on the `Brand` component.
+
+### Accessibility notes
+
+This component is still in its initial alpha stages, and requires a full and extensive accessibility review.
+
+## Contributing
+
+Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead repository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md).
+
+### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md)
+
+We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it.
+
+### License
+
+Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE).

packages/components/psammead-script-link/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@bbc/psammead-script-link",
+  "version": "1.0.0-alpha.1",
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
+  "description": "React styled component for a script switch",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-script-link"
+  },
+  "author": {
+    "name": "Psammead Maintainers",
+    "email": "[email protected]"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "bbc",
+    "script-link",
+    "brand"
+  ],
+  "bugs": {
+    "url": "https://github.com/bbc/psammead/issues"
+  },
+  "homepage": "https://github.com/BBC-News/psammead/blob/latest/packages/components/psammead-script-link/README.md",
+  "dependencies": {
+    "@bbc/gel-foundations": "^3.4.0",
+    "@bbc/psammead-styles": "^4.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.9.0",
+    "styled-components": "^4.3.2",
+    "prop-types": "^15.7.2"
+  },
+  "publishConfig": {
+    "tag": "alpha"
+  }
+}

packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScriptLink should render correctly 1`] = `
+.c0 {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  font-family: ReithSans,Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  position: relative;
+  display: inline-block;
+  color: #FFFFFF;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 3rem;
+}
+
+.c0::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 0.0625rem solid #FFFFFF;
+}
+
+.c0:hover::after {
+  border: 0.25rem solid #FFFFFF;
+}
+
+.c0:focus {
+  background-color: #FFFFFF;
+  color: #222222;
+}
+
+@media (min-width:20rem) and (max-width:37.4375rem) {
+  .c0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width:37.5rem) {
+  .c0 {
+    line-height: 3rem;
+  }
+}
+
+@media (max-width:37.5rem) {
+  .c0 {
+    line-height: 2.5rem;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+  }
+}
+
+<a
+  class="c0"
+  href="https://www.bbc.co.uk/news"
+>
+  Lat
+</a>
+`;

packages/components/psammead-script-link/src/index.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getPica } from '@bbc/gel-foundations/typography';
+import { GEL_GROUP_3_SCREEN_WIDTH_MIN } from '@bbc/gel-foundations/breakpoints';
+import { getSansRegular } from '@bbc/psammead-styles/font-styles';
+import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours';
+import { string, shape, node } from 'prop-types';
+import { scriptPropType } from '@bbc/gel-foundations/prop-types';
+
+const StyledLink = styled.a`
+  ${({ script }) => script && getPica(script)}
+  ${({ service }) => service && getSansRegular(service)}
+  position: relative;
+  display: inline-block;
+  color: ${C_WHITE};
+  text-decoration: none;
+  padding: 0 1rem;
+  height: 3rem;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 0.0625rem solid ${C_WHITE};
+  }
+  &:hover::after {
+    border: 0.25rem solid ${C_WHITE};
+  }
+  &:focus {
+    background-color: ${C_WHITE};
+    color: ${C_EBON};
+  }
+  @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    line-height: 3rem;
+  }
+  @media (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
+    line-height: 2.5rem;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+  }
+`;
+
+const ScriptLink = ({ children, script, service, href, variant }) => (
+  <StyledLink
+    script={script}
+    service={service}
+    href={href}
+    data-variant={variant}
+  >
+    {children}
+  </StyledLink>
+);
+
+ScriptLink.defaultProps = {
+  variant: null,
+};
+
+ScriptLink.propTypes = {
+  children: node.isRequired,
+  script: shape(scriptPropType).isRequired,
+  service: string.isRequired,
+  href: string.isRequired,
+  variant: string,
+};
+
+export default ScriptLink;

packages/components/psammead-script-link/src/index.stories.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { dirDecorator } from '@bbc/psammead-storybook-helpers';
+import styled from 'styled-components';
+import notes from '../README.md';
+import ScriptLink from './index';
+
+const Container = styled.div`
+  background-color: black;
+  padding: 1rem;
+  height: 100vh;
+`;
+
+storiesOf('Components|ScriptLink', module)
+  .addDecorator(withKnobs)
+  .addDecorator(dirDecorator)
+  .add(
+    'default',
+    ({ script, service }) => {
+      const label = text('Link Label', 'Lat');
+      const variant = text('Variant', 'lat');
+
+      return (
+        <Container>
+          <ScriptLink
+            script={script}
+            service={service}
+            href="https://www.bbc.com/serbian/lat"
+            variant={variant}
+          >
+            {label}
+          </ScriptLink>
+        </Container>
+      );
+    },
+    {
+      notes,
+    },
+  );

packages/components/psammead-script-link/src/index.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers';
+import { render } from '@testing-library/react';
+import { latin } from '@bbc/gel-foundations/scripts';
+import ScriptLink from './index';
+
+describe('ScriptLink', () => {
+  const props = {
+    service: 'news',
+    href: 'https://www.bbc.co.uk/news',
+    script: latin,
+  };
+
+  shouldMatchSnapshot(
+    'should render correctly',
+    <ScriptLink {...props}>Lat</ScriptLink>,
+  );
+
+  it('should render a link', () => {
+    const { container } = render(
+      <ScriptLink {...props} variant="lat">
+        Lat
+      </ScriptLink>,
+    );
+    const links = container.querySelectorAll('a');
+
+    expect(links).toHaveLength(1);
+    expect(links[0]).toHaveProperty('href');
+    expect(links[0].href).toEqual('https://www.bbc.co.uk/news');
+    expect(links[0].textContent).toEqual('Lat');
+    expect(links[0].dataset).toHaveProperty('variant');
+    expect(links[0].dataset.variant).toEqual('lat');
+  });
+});