Skip to content

Commit

Permalink
Merge pull request #849 from compulim/adaptivecards-1.0-rebased
Browse files Browse the repository at this point in the history
Adaptive Cards 1.0
  • Loading branch information
eanders-ms authored Mar 3, 2018
2 parents f87f4b0 + a39918f commit 66845a9
Show file tree
Hide file tree
Showing 17 changed files with 1,030 additions and 804 deletions.
21 changes: 16 additions & 5 deletions AdaptiveCards.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ You may wish to create your Host Configuration using SCSS in this repo. This met

### Optional: Embed without webpack

It is also possible to supply an Adaptive Cards Host Configuration without the need to webpack. Start with the [basic example from the readme](https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline), then add some script prior to instantiating `BotChat.App`:
It is also possible to supply an Adaptive Cards Host Configuration without the need to webpack. Start with the [basic example from the readme](https://github.com/Microsoft/BotFramework-WebChat#easy-in-your-non-react-website-run-web-chat-inline), then add `adaptiveCardsHostConfig` prop when instantiating `BotChat.App`:

```HTML
<!DOCTYPE html>
Expand All @@ -74,11 +74,10 @@ It is also possible to supply an Adaptive Cards Host Configuration without the n
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
//set Adaptive Cards Host Configuration
AdaptiveCards.setHostConfig( {YOUR JSON HERE} );
BotChat.App({
adaptiveCardsHostConfig: {
fontFamily: '"Myriad Pro", sans-serif'
},
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
Expand All @@ -88,3 +87,15 @@ It is also possible to supply an Adaptive Cards Host Configuration without the n
</body>
</html>
```

Or alternatively, in React:

```jsx
<BotChat.Chat
adaptiveCardsHostConfig={{ fontFamily: '"Myriad Prop", sans-serif' }}
directLine={{ secret: direct_line_secret }}
user={{ id: 'userid' }}
bot={{ id: 'botid' }}
resize="detect"
/>
```
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ In the `/src/scss/` folder you will find the source files for generating `/botch

#### Card Layout

Web Chat uses [AdaptiveCards](https://adaptivecards.io) that let the bot developer create cards with advanced layout and interactive capabilities. For more details, see [AdaptiveCards.md](AdaptiveCards.md)
Web Chat uses [Adaptive Cards](https://adaptivecards.io) that let the bot developer create cards with advanced layout and interactive capabilities. For more details, see [AdaptiveCards.md](AdaptiveCards.md)

#### Card Sizes / Responsiveness

Expand Down
201 changes: 74 additions & 127 deletions adaptivecards-hostconfig.json
Original file line number Diff line number Diff line change
@@ -1,174 +1,121 @@
{
"supportsInteractivity": true,
"strongSeparation": {
"spacing": 40,
"spacing": {
"small": 4,
"default": 8,
"medium": 16,
"large": 24,
"extraLarge": 32,
"padding": 8
},
"separator": {
"lineThickness": 1,
"lineColor": "#eeeeee"
"lineColor": "#cccccc"
},
"fontFamily": "\"Segoe UI\", sans-serif",
"fontSizes": {
"small": 12,
"normal": 13,
"default": 13,
"medium": 15,
"large": 17,
"extraLarge": 19
},
"fontWeights": {
"lighter": 200,
"normal": 400,
"default": 400,
"bolder": 700
},
"colors": {
"dark": {
"normal": "#000000",
"subtle": "#808c95"
},
"light": {
"normal": "#ffffff",
"subtle": "#88ffff"
},
"accent": {
"normal": "#2e89fc",
"subtle": "#802E8901"
},
"attention": {
"normal": "#ffd800",
"subtle": "#CCFFD800"
},
"good": {
"normal": "#00ff00",
"subtle": "#CC00FF00"
"containerStyles": {
"default": {
"backgroundColor": "#00000000",
"foregroundColors": {
"default": {
"default": "#000000",
"subtle": "#808c95"
},
"accent": {
"default": "#2e89fc",
"subtle": "#802E8901"
},
"attention": {
"default": "#ffd800",
"subtle": "#CCFFD800"
},
"good": {
"default": "#00ff00",
"subtle": "#CC00FF00"
},
"warning": {
"default": "#ff0000",
"subtle": "#CCFF0000"
}
}
},
"warning": {
"normal": "#ff0000",
"subtle": "#CCFF0000"
"emphasis": {
"backgroundColor": "#08000000",
"foregroundColors": {
"default": {
"default": "#333333",
"subtle": "#EE333333"
},
"accent": {
"default": "#2e89fc",
"subtle": "#882E89FC"
},
"attention": {
"default": "#cc3300",
"subtle": "#DDCC3300"
},
"good": {
"default": "#54a254",
"subtle": "#DD54A254"
},
"warning": {
"default": "#e69500",
"subtle": "#DDE69500"
}
}
}
},
"imageSizes": {
"small": 40,
"medium": 64,
"large": 96
"medium": 80,
"large": 160
},
"actions": {
"maxActions": 100,
"separation": {
"spacing": 8
},
"spacing": "default",
"buttonSpacing": 8,
"stretch": false,
"showCard": {
"actionMode": "inlineEdgeToEdge",
"inlineTopMargin": 16,
"backgroundColor": "#00000000",
"padding": {
"top": 8,
"right": 8,
"bottom": 8,
"left": 8
}
"actionMode": "inline",
"inlineTopMargin": 8
},
"actionsOrientation": "vertical",
"actionAlignment": "left"
"actionAlignment": "stretch"
},
"adaptiveCard": {
"backgroundColor": "#00000000",
"padding": {
"left": 8,
"top": 8,
"right": 8,
"bottom": 8
}
},
"container": {
"separation": {
"spacing": 8
},
"normal": {
"backgroundColor": "#00000000"
},
"emphasis": {
"backgroundColor": "#eeeeee",
"borderColor": "#aaaaaa",
"borderThickness": {
"top": 1,
"right": 1,
"bottom": 1,
"left": 1
},
"padding": {
"top": 8,
"right": 8,
"bottom": 8,
"left": 8
}
}
},
"textBlock": {
"color": "dark",
"separations": {
"small": {
"spacing": 8
},
"normal": {
"spacing": 8
},
"medium": {
"spacing": 8
},
"large": {
"spacing": 8
},
"extraLarge": {
"spacing": 8
}
}
},
"image": {
"size": "medium",
"separation": {
"spacing": 8
}
"allowCustomStyle": false
},
"imageSet": {
"imageSize": "medium",
"separation": {
"spacing": 8
}
"maxImageHeight": 100
},
"factSet": {
"separation": {
"spacing": 8
},
"title": {
"color": "dark",
"size": "normal",
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "bolder",
"wrap": true,
"maxWidth": 150
},
"value": {
"color": "dark",
"size": "normal",
"color": "default",
"size": "default",
"isSubtle": false,
"weight": "normal",
"weight": "default",
"wrap": true
},
"spacing": 8
},
"input": {
"separation": {
"spacing": 8
}
},
"columnSet": {
"separation": {
"spacing": 8
}
},
"column": {
"separation": {
"spacing": 8
}
}
}
Loading

0 comments on commit 66845a9

Please sign in to comment.