feat: rename tile to card

carbon-design-system · May 3, 2019 · 15f1827 · 15f1827
1 parent c6903e3
commit 15f1827
Show file tree

Hide file tree

Showing 11 changed files with 252 additions and 215 deletions.
diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml
@@ -6,8 +6,8 @@
       path: /component-examples/DoDontExample
     - title: Caption
       path: /component-examples/Caption
-    - title: ResourceTile
-      path: /component-examples/ResourceTile
+    - title: ResourceCard
+      path: /component-examples/ResourceCard
     # - title: ImageComponent
     # path: /component-examples/ImageComponent
 - title: Contributing

diff --git a/...pages/component-examples/ResourceTile.mdx → ...pages/component-examples/ResourceCard.mdx b/...pages/component-examples/ResourceTile.mdx → ...pages/component-examples/ResourceCard.mdx
@@ -1,14 +1,14 @@
 ---
-title: ResourceTile
+title: ResourceCard
 ---
 
-import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
+import { Row, Column, ResourceCard } from 'gatsby-theme-carbon';
 
-## ResourceTile
+## ResourceCard
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -17,15 +17,33 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/sketch-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
+</Column>
+</Row>
+
+### Square
+
+<Row>
+<Column colMd={3} colLg={3} noGutterSm>
+    <ResourceCard
+      subTitle="Demo"
+      title="Internal link"
+      aspectRatio="1:1"
+      actionIcon="arrowRight"
+      href="/component-examples/demo"
+      >
+
+![](/images/github-icon.png)
+
+  </ResourceCard>
 </Column>
 </Row>
 
 ### Two
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Demo"
       title="Internal link"
       aspectRatio="2:1"
@@ -35,10 +53,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Download"
       actionIcon="download"
       aspectRatio="2:1"
@@ -47,15 +65,15 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/sketch-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 </Row>
 
 ### Three
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -65,10 +83,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Download"
       actionIcon="download"
       aspectRatio="2:1"
@@ -77,10 +95,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -89,15 +107,15 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 </Row>
 
 ### Four
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -106,10 +124,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Download"
       actionIcon="download"
       aspectRatio="2:1"
@@ -118,10 +136,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -130,10 +148,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -142,15 +160,15 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/github-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 </Row>
 
 ### Dark
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       actionIcon="arrowRight"
@@ -161,10 +179,10 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/sketch-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       actionIcon="launch"
       aspectRatio="2:1"
@@ -174,15 +192,15 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
 
 ![](/images/sketch-icon.png)
 
-  </ResourceTile>
+  </ResourceCard>
 </Column>
 </Row>
 
 ### Disabled
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -191,15 +209,15 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile subTitle="Design Kit" aspectRatio="2:1" disabled />
+    <ResourceCard subTitle="Design Kit" aspectRatio="2:1" disabled />
   </Column>
 </Row>
 
 ### Disabled dark
 
-<Row className="resource-tile-group">
+<Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile
+    <ResourceCard
       subTitle="Design Kit"
       title="Explore & Create"
       aspectRatio="2:1"
@@ -208,6 +226,6 @@ import { Row, Column, ResourceTile } from 'gatsby-theme-carbon';
     />
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
-    <ResourceTile subTitle="Design Kit" aspectRatio="2:1" disabled dark />
+    <ResourceCard subTitle="Design Kit" aspectRatio="2:1" disabled dark />
   </Column>
 </Row>
diff --git a/packages/gatsby-theme-carbon/index.js b/packages/gatsby-theme-carbon/index.js
@@ -4,5 +4,5 @@ export { default as Video } from './src/components/Video';
 export { default as DoDontExample } from './src/components/DoDontExample';
 export { Row, Column } from './src/components/Grid';
 export { default as Caption } from './src/components/Caption';
-export { default as ResourceTile } from './src/components/ResourceTile';
+export { default as ResourceCard } from './src/components/ResourceCard';
 //export { default as ImageComponent } from './src/components/ImageComponent'; // in progress
diff --git a/...c/components/ResourceTile/ResourceTile.js → ...c/components/ResourceCard/ResourceTile.js b/...c/components/ResourceTile/ResourceTile.js → ...c/components/ResourceCard/ResourceTile.js
@@ -10,7 +10,7 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-export default class ResourceTile extends React.Component {
+export default class ResourceCard extends React.Component {
   static propTypes = {
     children: PropTypes.node,
 
@@ -80,10 +80,10 @@ export default class ResourceTile extends React.Component {
       isLink = href.charAt(0) === '/';
     }
 
-    const resourceTileClassNames = classnames([`${prefix}--resource-tile`], {
+    const ResourceCardClassNames = classnames([`${prefix}--resource-card`], {
       [className]: className,
-      [`${prefix}--resource-tile--disabled`]: disabled,
-      [`${prefix}--resource-tile--dark`]: dark,
+      [`${prefix}--resource-card--disabled`]: disabled,
+      [`${prefix}--resource-card--dark`]: dark,
     });
 
     const aspectRatioClassNames = classnames([`${prefix}--aspect-ratio`], {
@@ -100,10 +100,10 @@ export default class ResourceTile extends React.Component {
 
     const tileContent = (
       <>
-        <h5 className={`${prefix}--resource-tile__subtitle`}>{subTitle}</h5>
-        <h4 className={`${prefix}--resource-tile__title`}>{title}</h4>
-        <div className={`${prefix}--resource-tile__icon--img`}>{children}</div>
-        <div className={`${prefix}--resource-tile__icon--action`}>
+        <h5 className={`${prefix}--resource-card__subtitle`}>{subTitle}</h5>
+        <h4 className={`${prefix}--resource-card__title`}>{title}</h4>
+        <div className={`${prefix}--resource-card__icon--img`}>{children}</div>
+        <div className={`${prefix}--resource-card__icon--action`}>
           {actionIcon === 'launch' && !disabled ? (
             <Launch20 aria-label="Open resource" />
           ) : null}
@@ -143,7 +143,7 @@ export default class ResourceTile extends React.Component {
     }
 
     return (
-      <div className={resourceTileClassNames}>
+      <div className={ResourceCardClassNames}>
         <div className={aspectRatioClassNames}>
           <div className={`${prefix}--aspect-ratio--object`}>
             {tileContainer}

diff --git a/packages/gatsby-theme-carbon/src/components/ResourceCard/index.js b/packages/gatsby-theme-carbon/src/components/ResourceCard/index.js
@@ -0,0 +1,3 @@
+import ResourceCard from './ResourceCard';
+
+export default ResourceCard;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ResourceCard from './ResourceCard';

		export default ResourceCard;