@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-code/examples.js

@@ -1,56 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/* @flow strict */
-
-import React from 'react';
-
-import { BpkCode, BpkCodeBlock } from './index';
-
-const Inline = () => <BpkCode>npm install react --save</BpkCode>;
-const InlineAlternate = () => (
-  <BpkCode alternate>npm install react --save</BpkCode>
-);
-const Block = () => (
-  <BpkCodeBlock>
-    import React from &apos;react&apos;;
-    <br />
-    import ReactDOM from &apos;react-dom&apos;;
-    <br />
-    ReactDOM.render( ... );
-  </BpkCodeBlock>
-);
-const BlockAlternate = () => (
-  <BpkCodeBlock alternate>
-    import React from &apos;react&apos;;
-    <br />
-    import ReactDOM from &apos;react-dom&apos;;
-    <br />
-    ReactDOM.render( ... );
-  </BpkCodeBlock>
-);
-
-const MixedExample = () => (
-  <div>
-    <Inline />
-    <InlineAlternate />
-    <Block />
-    <BlockAlternate />
-  </div>
-);
-
-export { Inline, InlineAlternate, Block, BlockAlternate, MixedExample };

package/bpk-component-content-container/examples.js

@@ -1,307 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import BpkContentContainer from './index';
-
-const DefaultExample = () => (
-  <div>
-    <BpkContentContainer bareHtml>
-      <h1>Heading Level 1</h1>
-      <h2>Heading Level 2</h2>
-      <h3>Heading Level 3</h3>
-      <h4>Heading Level 4</h4>
-      <h5>Heading Level 5</h5>
-      <h6>Heading Level 6</h6>
-      <h1>Heading Level 1</h1>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h2>Heading Level 2</h2>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h3>Heading Level 3</h3>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h4>Heading Level 4</h4>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h5>Heading Level 5</h5>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h6>Heading Level 6</h6>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <blockquote>
-        <p>
-          A paragraph (from the Greek paragraphos, &quot;to write beside&quot;
-          or &quot;written beside&quot;) is a self-contained unit of a discourse
-          in writing dealing with a particular point or idea. A paragraph
-          consists of one or more sentences. Though not required by the syntax
-          of any language, paragraphs are usually an expected part of formal
-          writing, used to organize longer prose.
-        </p>
-      </blockquote>
-      <ul>
-        <li>Lorem ipsum dolor sit amet</li>
-        <li>Consectetur adipiscing elit</li>
-        <li>Integer molestie lorem at massa</li>
-        <li>Facilisis in pretium nisl aliquet</li>
-        <li>
-          Nulla volutpat aliquam velit
-          <ul>
-            <li>Phasellus iaculis neque</li>
-            <li>Purus sodales ultricies</li>
-            <li>Vestibulum laoreet porttitor sem</li>
-            <li>Ac tristique libero volutpat at</li>
-          </ul>
-        </li>
-        <li>Faucibus porta lacus fringilla vel</li>
-        <li>Aenean sit amet erat nunc</li>
-        <li>Eget porttitor lorem</li>
-        <li>
-          Nulla volutpat aliquam velit
-          <ol>
-            <li>Phasellus iaculis neque</li>
-            <li>Purus sodales ultricies</li>
-            <li>Vestibulum laoreet porttitor sem</li>
-            <li>Ac tristique libero volutpat at</li>
-          </ol>
-        </li>
-      </ul>
-      <table>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>First name</th>
-            <th>Last name</th>
-            <th>Username</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>Matthew</td>
-            <td>Davidson</td>
-            <td>@matthewdavidson</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>James</td>
-            <td>Ferguson</td>
-            <td>@jamesf</td>
-          </tr>
-        </tbody>
-      </table>
-      <code>npm install --save-dev bpk-component-content-container</code>
-      <br />
-      <pre>
-        <code>
-          {`
-import BpkContentContainer from '../bpk-component-content-container';
-export default () => (
-<BpkContentContainer>
-  <p>Hello<p>
-<BpkContentContainer>
-);
-          `}
-        </code>
-      </pre>
-    </BpkContentContainer>
-  </div>
-);
-
-const Alternate = () => (
-  <div>
-    <BpkContentContainer bareHtml alternate>
-      <h1>Heading Level 1</h1>
-      <h2>Heading Level 2</h2>
-      <h3>Heading Level 3</h3>
-      <h4>Heading Level 4</h4>
-      <h5>Heading Level 5</h5>
-      <h6>Heading Level 6</h6>
-      <h1>Heading Level 1</h1>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h2>Heading Level 2</h2>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h3>Heading Level 3</h3>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h4>Heading Level 4</h4>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h5>Heading Level 5</h5>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <h6>Heading Level 6</h6>
-      <p>
-        A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or
-        &quot;written beside&quot;) is a self-contained unit of a discourse in
-        writing dealing with a particular point or idea. A paragraph consists of
-        one or more sentences. Though not required by the syntax of any
-        language, paragraphs are usually an expected part of formal writing,
-        used to organize longer prose.
-      </p>
-      <blockquote>
-        <p>
-          A paragraph (from the Greek paragraphos, &quot;to write beside&quot;
-          or &quot;written beside&quot;) is a self-contained unit of a discourse
-          in writing dealing with a particular point or idea. A paragraph
-          consists of one or more sentences. Though not required by the syntax
-          of any language, paragraphs are usually an expected part of formal
-          writing, used to organize longer prose.
-        </p>
-      </blockquote>
-      <ul>
-        <li>Lorem ipsum dolor sit amet</li>
-        <li>Consectetur adipiscing elit</li>
-        <li>Integer molestie lorem at massa</li>
-        <li>Facilisis in pretium nisl aliquet</li>
-        <li>
-          Nulla volutpat aliquam velit
-          <ul>
-            <li>Phasellus iaculis neque</li>
-            <li>Purus sodales ultricies</li>
-            <li>Vestibulum laoreet porttitor sem</li>
-            <li>Ac tristique libero volutpat at</li>
-          </ul>
-        </li>
-        <li>Faucibus porta lacus fringilla vel</li>
-        <li>Aenean sit amet erat nunc</li>
-        <li>Eget porttitor lorem</li>
-        <li>
-          Nulla volutpat aliquam velit
-          <ol>
-            <li>Phasellus iaculis neque</li>
-            <li>Purus sodales ultricies</li>
-            <li>Vestibulum laoreet porttitor sem</li>
-            <li>Ac tristique libero volutpat at</li>
-          </ol>
-        </li>
-      </ul>
-      <table>
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>First name</th>
-            <th>Last name</th>
-            <th>Username</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>Matthew</td>
-            <td>Davidson</td>
-            <td>@matthewdavidson</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>James</td>
-            <td>Ferguson</td>
-            <td>@jamesf</td>
-          </tr>
-        </tbody>
-      </table>
-      <code>npm install --save-dev bpk-component-content-container</code>
-      <br />
-      <pre>
-        <code>
-          {`
-import BpkContentContainer from '../bpk-component-content-container';
-export default () => (
-<BpkContentContainer>
-  <p>Hello<p>
-<BpkContentContainer>
-);
-          `}
-        </code>
-      </pre>
-    </BpkContentContainer>
-  </div>
-);
-
-export { DefaultExample, Alternate };

package/bpk-component-datatable/examples.js

@@ -1,138 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import { BpkDataTable, BpkDataTableColumn } from './index';
-
-const rows = [
-  {
-    name: 'Abikso',
-    description:
-      'A village in northern Sweden, home to the Climate Impacts Research Centre.',
-    location: 'Sweden',
-    numericValue: 1,
-  },
-  {
-    name: 'Nara',
-    description: 'A city in Japan famous for its deer population.',
-    location: 'Japan',
-    numericValue: 2,
-  },
-  {
-    name: 'Erfoud',
-    description:
-      'A Moroccan oasis town that has been used as a location for many films.',
-    location: 'Morocco',
-    numericValue: 3,
-  },
-  {
-    name: 'Panjin',
-    description: 'A Chinese city famed for its vividly-coloured red seabeach.',
-    location: 'China',
-    numericValue: 4,
-  },
-];
-
-// eslint-disable-next-line no-alert
-const onRowClick = (row) => alert(JSON.stringify(row));
-
-const AutowidthExample = () => (
-  <BpkDataTable rows={rows} height={400} onRowClick={onRowClick}>
-    <BpkDataTableColumn label="Name" dataKey="name" width={100} />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-      flexGrow={1}
-    />
-    <BpkDataTableColumn label="Location" dataKey="location" width={100} />
-    <BpkDataTableColumn
-      label="Numeric value"
-      dataKey="numericValue"
-      width={100}
-    />
-  </BpkDataTable>
-);
-
-const NonHoverRows = () => (
-  <BpkDataTable rows={rows} height={300}>
-    <BpkDataTableColumn label="Name" dataKey="name" width={100} />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-      flexGrow={1}
-    />
-    <BpkDataTableColumn label="Location" dataKey="location" width={100} />
-  </BpkDataTable>
-);
-
-const FixedWidth = () => (
-  <BpkDataTable rows={rows} height={300} width={400} onRowClick={onRowClick}>
-    <BpkDataTableColumn label="Name" dataKey="name" width={100} />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-      flexGrow={1}
-    />
-    <BpkDataTableColumn label="Location" dataKey="location" width={100} />
-  </BpkDataTable>
-);
-
-const DisabledSort = () => (
-  <BpkDataTable rows={rows} height={300} onRowClick={onRowClick}>
-    <BpkDataTableColumn label="Name" dataKey="name" width={100} />
-    <BpkDataTableColumn
-      label="Description (Disabled Sorting)"
-      dataKey="description"
-      width={100}
-      flexGrow={1}
-      disableSort
-    />
-    <BpkDataTableColumn label="Location" dataKey="location" width={100} />
-  </BpkDataTable>
-);
-
-const CustomRowAndHeaderHeights = () => (
-  <BpkDataTable
-    rows={rows}
-    height={300}
-    headerHeight={80}
-    rowHeight={30}
-    onRowClick={onRowClick}
-  >
-    <BpkDataTableColumn label="Name" dataKey="name" width={100} />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-      flexGrow={1}
-    />
-    <BpkDataTableColumn label="Location" dataKey="location" width={100} />
-  </BpkDataTable>
-);
-
-export {
-  AutowidthExample,
-  NonHoverRows,
-  FixedWidth,
-  DisabledSort,
-  CustomRowAndHeaderHeights,
-};