fix(website): composable do-dont, add anchor examples

packages/paste-core/utilities/aspect-ratio/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@twilio-paste/aspect-ratio",
+  "version": "0.1.0",
+  "category": "layout",
+  "status": "alpha",
+  "description": "",
+  "author": "Twilio Inc.",
+  "license": "MIT",
+  "main:dev": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && yarn compile",
+    "build:dev": "yarn clean && yarn compile:dev",
+    "clean": "rm -rf ./dist && rm -rf tsconfig.build.tsbuildinfo && rm -rf .rpt2_cache",
+    "compile": "rollup -c --environment NODE_ENV:production",
+    "compile:dev": "rollup -c --environment NODE_ENV:development",
+    "prepublishOnly": "yarn build",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "^10.0.10",
+    "@twilio-paste/absolute": "^0.1.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "styled-system": "^4.1.0"
+  },
+  "devDependencies": {
+    "@twilio-paste/absolute": "^0.1.0",
+    "rollup": "^1.16.2",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-node-resolve": "^5.1.0",
+    "rollup-plugin-terser": "^5.0.0",
+    "rollup-plugin-typescript2": "^0.21.2",
+    "typescript": "^3.5.2"
+  }
+}

packages/paste-core/utilities/aspect-ratio/rollup.config.js

@@ -0,0 +1,34 @@
+import typescript from 'rollup-plugin-typescript2';
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import {terser} from 'rollup-plugin-terser';
+import pkg from './package.json';
+
+export default {
+  input: pkg['main:dev'],
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+    },
+    {
+      file: pkg.module,
+      format: 'es',
+    },
+  ],
+  external: [...Object.keys(pkg.peerDependencies || {})],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({
+      clean: true,
+      typescript: require('typescript'),
+      tsconfig: './tsconfig.build.json',
+    }),
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    process.env.NODE_ENV === 'production' ? terser() : null,
+  ],
+};

packages/paste-core/utilities/aspect-ratio/src/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import {Absolute} from '@twilio-paste/absolute';
+
+interface AspectRatioProps {
+  aspectRatio: string;
+  children: NonNullable<React.ReactNode>;
+}
+
+const RATIO_REGEX = /^(\d+:\d*)$/;
+
+const isCorrectPattern = (ratio: string): boolean => RATIO_REGEX.test(ratio);
+
+const handlePropValidation = ({aspectRatio}: AspectRatioProps): void => {
+  const hasRatio = aspectRatio != null && aspectRatio !== '';
+
+  if (!hasRatio) {
+    throw new Error(`[Paste: AspectRatio] Missing 'aspectRatio' prop.`);
+  }
+
+  if (!isCorrectPattern(aspectRatio)) {
+    throw new Error(`[Paste: AspectRatio] 'aspectRatio' is invalid. Use a colon separated number pattern (4:3).`);
+  }
+};
+
+const AspectRatioContainer = styled.div`
+  position: relative;
+`;
+
+const AspectRatio: React.FC<AspectRatioProps> = props => {
+  handlePropValidation(props);
+
+  const aspectArray = props.aspectRatio.split(':').map(Number);
+  const aspectPercent = (aspectArray[1] / aspectArray[0]) * 100;
+
+  return (
+    <AspectRatioContainer style={{paddingBottom: `${aspectPercent}%`}}>
+      <Absolute>{props.children}</Absolute>
+    </AspectRatioContainer>
+  );
+};
+
+AspectRatio.defaultProps = {
+  aspectRatio: '4:3',
+};
+
+export {AspectRatio};

packages/paste-core/utilities/aspect-ratio/tsconfig.build.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "references": [
+    {
+      "path": "../absolute"
+    }
+  ]
+}

packages/paste-core/utilities/aspect-ratio/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "include": ["src/**/*"]
+}

packages/paste-website/gatsby-config.js

@@ -30,6 +30,13 @@ module.exports = {
         ],
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'assets',
+        path: `${__dirname}/src/assets`,
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {

packages/paste-website/package.json

@@ -22,6 +22,7 @@
     "@mdx-js/react": "^1.0.23",
     "@mdx-js/tag": "^0.20.3",
     "@twilio-paste/anchor": "^0.1.4",
+    "@twilio-paste/aspect-ratio": "^0.1.0",
     "@twilio-paste/box": "^0.3.0",
     "@twilio-paste/button": "^0.2.0",
     "@twilio-paste/heading": "^0.3.3",

packages/paste-website/src/components/DoDont.tsx

@@ -1,81 +1,67 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {themeGet} from 'styled-system';
+import {Absolute} from '@twilio-paste/absolute';
 import {Box} from '@twilio-paste/box';
 import {Text} from '@twilio-paste/text';
 
+interface DoDontProps {
+  children: React.ReactNode;
+}
+
 const StyledWrapper = styled(Box)`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: ${themeGet('space.space70')};
 `;
 
-interface DoDontProps {
-  children: React.ReactNode;
-}
-
 const DoDont: React.FC<DoDontProps> = props => {
   return (
-    <StyledWrapper marginTop="space90" marginBottom="space90">
+    <StyledWrapper marginTop="space90" marginBottom="space130">
       {props.children}
     </StyledWrapper>
   );
 };
 
-interface ExampleProps {
-  children: React.ReactNode;
-  do: boolean;
-  image?: string;
-}
-
-const StyledExampleWraper: React.FC<ExampleProps> = styled(Box)`
-  border-top: ${(props: ExampleProps) =>
-    props.do
-      ? `${themeGet('borderWidths.borderWidth20')(props)} solid #23bf6e`
-      : `${themeGet('borderWidths.borderWidth20')(props)} solid #ce241a`};
+const DoDontImage = styled(Box)`
+  border: ${themeGet('borderWidths.borderWidth10')} solid #ccd2dc;
+  border-bottom: 0;
 `;
 
-const StyledExampleImg: React.FC<ExampleProps> = styled(Box)`
+const DoDontComponent = styled(Absolute)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: ${themeGet('borderWidths.borderWidth10')} solid #ccd2dc;
-  border-top: 0;
+  border-bottom: 0;
+`;
 
-  img {
-    display: block;
-    width: 100%;
-  }
+const Do = styled(Box)`
+  padding-top: ${themeGet('space.space50')};
+  border-top: ${themeGet('borderWidths.borderWidth20')} solid #23bf6e;
 `;
 
-const Example: React.FC<ExampleProps> = props => {
-  const hasImage = props.image;
-  return (
-    <StyledExampleWraper {...props}>
-      {hasImage ? (
-        <StyledExampleImg {...props}>
-          <img src={props.image} alt="" />
-        </StyledExampleImg>
-      ) : null}
-      <Box marginTop="space50">
-        <Text
-          as="h5"
-          fontSize="fontSize20"
-          fontWeight="fontWeightSemibold"
-          lineHeight="lineHeight40"
-          marginBottom="space40"
-        >
-          {props.do ? 'Do' : `Don't`}
-        </Text>
-        {props.children}
-      </Box>
-    </StyledExampleWraper>
-  );
-};
+const Dont = styled(Box)`
+  padding-top: ${themeGet('space.space50')};
+  border-top: ${themeGet('borderWidths.borderWidth20')} solid #ce241a;
+`;
 
-const Do: React.FC<ExampleProps> = props => {
-  return <Example do {...props} />;
-};
+interface DoDontTitleProps {
+  do: boolean;
+}
 
-const Dont: React.FC<ExampleProps> = props => {
-  return <Example do={false} {...props} />;
+const DoDontTitle: React.FC<DoDontTitleProps> = props => {
+  return (
+    <Text
+      as="h5"
+      fontSize="fontSize20"
+      fontWeight="fontWeightSemibold"
+      lineHeight="lineHeight40"
+      marginBottom="space40"
+    >
+      {props.do ? 'Do' : `Don't`}
+    </Text>
+  );
 };
 
-export {DoDont, Do, Dont};
+export {DoDont, Do, Dont, DoDontImage, DoDontComponent, DoDontTitle};

packages/paste-website/src/pages/components/anchor/index.mdx

@@ -5,12 +5,15 @@ description: The anchor can be used to hyperlink to another URL. It accepts both
 ---
 
 import {graphql} from 'gatsby';
+import Img from 'gatsby-image';
 import {Anchor} from '@twilio-paste/anchor';
 import {Box} from '@twilio-paste/box';
-import Changelog from '@twilio-paste/anchor/CHANGELOG.md';
-import {DoDont, Do, Dont} from '../../../components/DoDont';
+import {Text} from '@twilio-paste/text';
+import {AspectRatio} from '@twilio-paste/aspect-ratio'
+import {DoDont, Do, Dont, DoDontContent, DoDontImage, DoDontComponent, DoDontTitle} from '../../../components/DoDont';
 import {SidebarCategoryRoutes} from '../../../constants';
 import {P} from '../../../components/Typography.tsx';
+import Changelog from '@twilio-paste/anchor/CHANGELOG.md';
 
 export const pageQuery = graphql`
   {
@@ -24,6 +27,13 @@ export const pageQuery = graphql`
         }
       }
     }
+    file(sourceInstanceName: {eq: "assets"}, relativePath: {eq: "images/anchor-dont-1@4x.png"}) {
+      childImageSharp {
+        fluid(maxWidth: 500) {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
   }
 `;
 
@@ -93,21 +103,41 @@ This is done for security purposes. Even though the target and rel are set by de
 You can use an anchor to navigate the user to another webpage.
 
 <DoDont>
-  <Do>
-    Anchors should only be used to link to another page, app, or another website.
-  </Do>
-  <Dont>
-    Don’t use an anchor where a button makes more sense, i.e., closing a modal.
-  </Dont>
+  <Box>
+    <AspectRatio>
+      <DoDontComponent>
+        <Anchor href="https://paste.twilio.design">Go to API documentation</Anchor>
+      </DoDontComponent>
+    </AspectRatio>
+    <Do>
+      <DoDontTitle do />
+      Anchors should only be used to link to another page, app, or another website.
+    </Do>
+  </Box>
+  <Box>
+    <DoDontImage>
+      <Img fluid={props.data.file.childImageSharp.fluid} />
+    </DoDontImage>
+    <Dont>
+      <DoDontTitle />
+      Don’t use an anchor where a button makes more sense, i.e., closing a modal.
+    </Dont>
+  </Box>
 </DoDont>
 
 <DoDont>
-  <Do>
-    Anchors should only include text.
-  </Do>
-  <Dont>
-    Don’t use an icon in place of or with anchor text.
-  </Dont>
+  <Box>
+    <Do>
+      <DoDontTitle do />
+      Anchors should only include text.
+    </Do>
+  </Box>
+  <Box>
+    <Dont>
+      <DoDontTitle />
+      Don’t use an icon in place of or with anchor text.
+    </Dont>
+  </Box>
 </DoDont>
 
 </content>